<template>
	<view class="ray-list content">
		<view class="ray-list__body list-panel" style="margin-top: 0rpx;">
			<view class="list-view">
				<div class="activity-item" v-for="(item, index) in list" :key="index">
					<view @click="goToActivityDetail(item.activityId)">
						<image :src="item.activityPic" mode="aspectFill"></image>
						<view class="title">{{ item.activityName }}</view>
						<view class="active-item-info" v-for="(i, index) in item.timeAddressList" :key="index">
							<view class="date">活动时间：{{ i.activityTime }}</view>
							<view class="area">活动地点：{{ i.activityAddress }}</view>
						</view>
					</view>
					<view class="attention">
						<view class="heratBg">
							<image class="editeImage" :src="thumbsImgHeart" v-if="item.isLike == '2'" @click="handleClick(item)" />
							<image class="editeImage" :src="thumbsImgYellow" v-else @click="handleClick(item)" />
						</view>
						<text class="attentionText">{{ item.attention }}</text>
					</view>
				</div>
			</view>
		</view>
		<view class="ray-list__foot"><mix-load-more :status="loadMoreStatus"></mix-load-more></view>
	</view>
</template>

<script>
import http from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
import WucTab from '@/components/wuc-tab/wuc-tab.vue';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	mounted() {
		this.loadData();
	},
	created() {
		const info = uni.getSystemInfoSync();
	},
	components: {
		mixLoadMore
	},
	data() {
		return {
			thumbsImgHeart: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/heart_empty.png',
			thumbsImgYellow: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/heart_fill.png',
			searchValue: '',
			tabList: [
				{
					name: '全部',
					status: undefined
				},
				{
					name: '未开始',
					status: 3
				},
				{
					name: '进行中',
					status: 1
				},
				{
					name: '已结束',
					status: 2
				}
			],
			nodeType: 0,
			pageNum: 1,
			pageSize: 5,
			allowRequest: true,
			loadMoreStatus: 0, //0加载前，1加载中，2没有更多了
			list: []
		};
	},
	mounted() {
		this.loadData();
	},
	onReachBottom() {
		this.loadData();
	},
	methods: {
		searchAction(e) {
			if (typeof e == 'string') {
				this.input(e);
			} else {
				this.input(e.value);
			}
		},
		input(value) {
			if (this.timer) {
				clearTimeout(this.timer);
			}
			this.timer = setTimeout(() => {
				this.searchValue = value;
				this.reset();
				this.loadData(); //通过apply还原this指向事件
			}, 1000);
		},
		reset() {
			//重置查询第一页
			this.pageNum = 1;
			this.allowRequest = true;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			this.list = [];
		},
		getParameters() {
			const { searchValue, tabList, nodeType, pageNum, pageSize } = this;
			const result = { pageNum, pageSize, searchValue };
			const key = tabList[nodeType].status;
			if (key !== undefined) {
				result.status = key;
			}
			if (searchValue !== undefined) {
				result.search = searchValue;
			}
			return result;
		},
		loadData(flag) {
			const { list, pageNum, pageSize, allowRequest } = this;
			if (!allowRequest) {
				return;
			}
			this.loadMoreStatus = 1;
			http('/api/activity/myActivityList', { data: { ...this.getParameters() }, method: 'GET' }).then(
				result => {
					if (result.code === 200) {
						this.allowRequest = result.total / pageSize > pageNum;
						if (this.allowRequest) {
							this.loadMoreStatus = 0;
						} else {
							this.loadMoreStatus = 2;
						}
						this.pageNum++;

						this.list = list.concat(result.data || []);
						this.loadMoreStatus = this.list.length === 0 ? 3 : this.loadMoreStatus;
					}
				},
				result => {
					this.loadMoreStatus = 0;
				}
			);
		},
		tabChange(index) {
			this.nodeType = index;
			this.reset();
			this.loadData();
		},
		handleClick: function(data) {
			let url = '';
			if (data.isLike == '2') {
				url = 'api/activity/dataIncr'; // 点赞
				data.isLike = '1';
			} else {
				url = 'api/activity/dataDecr'; // 取消点赞
				data.isLike = '2';
			}
			http(url, {
				method: 'post',
				data: {
					activityId: data.activityId
				}
			}).then(result => {
				// if(data.isLike == '2') {
				// 	data.isLike == '1'
				// } else {
				// 	data.isLike == '2'
				// }
			});
		},
		goToActivityDetail(activityId) {
			uni.navigateTo({
				url: '/activity/info/index?activityId=' + activityId + '&from=personal',
				animationType: 'pop-in',
				animationDuration: 200
			});
		}
	}
};
</script>

<style lang="less" scoped>
.search-bar {
	display: flex;
	padding: 20rpx 40rpx;
	align-items: center;
	justify-content: space-between;
	// #ifdef MP-WEIXIN
	/deep/uni-search-bar {
		flex-grow: 1;
		.uni-searchbar {
			flex-grow: 1;
			padding: 0;
		}
	}
	// #endif
	// #ifdef H5
	/deep/.uni-searchbar {
		flex-grow: 1;
		padding: 0;
	}
	// #endif
	.search-text {
		padding: 16rpx 0 16rpx 26rpx;
		color: #66645d;
		font-size: 26rpx;
		margin: 0;
		background-color: transparent;
		line-height: 1;
	}
}
.tabs {
	color: rgba(138, 140, 141, 1);
	font-size: 26rpx;
	background: #ffffff;
}

.tab-selected {
	font-weight: 400;
	color: rgba(102, 100, 93, 1);
	position: relative;
	border-bottom: 0 !important;
	&::after {
		content: '1111';
		width: 40rpx;
		height: 6rpx;
		background: rgba(102, 100, 93, 1);
		border-radius: 5rpx;
		display: block;
		position: absolute;
		bottom: 0;
		content: '';
		left: 40%;
	}
}

.attention {
	display: flex;
	justify-content: flex-end;
	padding: 0 20rpx 32rpx;
	color: rgba(178, 177, 174, 1);
	align-items: center;
	margin-top: 37rpx;
	.heratBg {
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		image {
			width: 32rpx !important;
			height: 32rpx !important;
			margin-top: 6rpx;
			// background: #0f0;
		}
	}
}

.attention-icon {
	margin-right: 14rpx;
}

.attentionText {
	font-size: 24rpx;
}

.activity-item {
	margin: 24rpx 40rpx 0;
	border-radius: 12rpx;
	background: #ffffff;

	image {
		border-radius: 12rpx 12rpx 0 0;
		width: 670rpx;
		height: 251rpx;
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(102, 100, 93, 1);
		line-height: 42rpx;
		margin-bottom: 12rpx;
		padding: 0 24rpx;
	}

	.active-item-info {
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(138, 140, 141, 1);
		margin-bottom: 8rpx;
		line-height: 40rpx;
		padding: 0 24rpx;
		.date {
			margin-bottom: 8rpx;
		}
		.area {
		}
		&:last-child {
			margin-bottom: 0;
		}
	}
}
</style>
